<template>
  <view class="container" id="guide-container">
    <homeskeleton v-if="initLoading"></homeskeleton>
    <view class="search-container">

      <!-- 日期 -->
      <view class="example-body" id="guide_0">
        <view style="width: 90%;display: inline-block">
          <uni-datetime-picker v-model="datetimerange" type="datetimerange" :start="minDate" rangeSeparator="至"
                               @change="pickupChange" v-if="!choseRadio" :hide-second="true">
            <text class="height-line">{{ showTime.startTime }}</text>
            {{ showTime.startDay }}
            <view
                style="margin: auto 10rpx;display: inline-block;border-radius: 40rpx;border:1rpx solid #007aff;padding: 5rpx 20rpx;color: #007aff">
              {{ showTime.daysDifference }}天
            </view>
            <text class="height-line">&nbsp;{{ showTime.endTime }}</text>
            {{ showTime.endDay }}

            <!--          <text style="color: #007aff;float: right">选择日期-->
            <!--            <uni-icons type="right" color="" size="13"></uni-icons>-->
            <!--          </text>-->
          </uni-datetime-picker>
          <input class="search-input" confirm-type="search" v-model="searchName" @confirm="initList" v-else
                 placeholder="请输入车辆信息"/>
        </view>

        <uni-icons type="search" @click="choseRadioEvent(1)" style="float: right;padding: 2rpx 10rpx"
                   :color="choseRadio?'#007aff':'#333333'" :size="20"></uni-icons>
        <view :class="choseRadio?'line':'date-line'"></view>
      </view>
      <!-- 状态选择 -->
    </view>
    <HM-filterDropdown :filterData="filterData" @confirm="confirmFilter" :menu-top="100"
                       :default-selected.sync="defaultChose"></HM-filterDropdown>


    <!-- 内容区 -->
    <view class="product-container " style="display: flex;position: relative;margin-top: 210rpx;overflow-y: hidden">

      <scroll-view class="" scroll-y="" style="height: 100%;">
        <block>

          <!--          <dp-product-itemlist @goproduct='goproduct' :data="datalist" :diffDay="showTime.daysDifference"-->
          <!--                               :menuindex="menuindex"></dp-product-itemlist>-->
          <waterfall
              ref="helangWaterfall"
              imageKey="pic"
              :hideList="hideList"
              @statusChange="handleStatusChange">
            <template v-slot:default="{ list, colWidth }">
              <waterfall-col
                  v-for="(colItem,colIndex) in list"
                  :key="colIndex"
                  :colWidth="colWidth"
              >
                <template>
                  <waterfall-item
                      v-if="colIndex==0"
                      :colIndex="colIndex"
                      :reportHeightTime="60"
                      @height="onRenderHeight">
                    <navigator url="/pages/home/guide">
                      <view class="guide">
                        <view class="guide-title">
                          新手租车指南
                        </view>
                        <view class="guide-text">
                          在线租车 服务至上
                        </view>
                      </view>
                    </navigator>
                  </waterfall-item>
                  <waterfall-item
                      v-for="(item,index) in colItem"
                      :key="item.__waterfall_renderId"
                      :colIndex="colIndex"

                      :reportHeightTime="item.__waterfall_reportHeightTime"
                      @height="onRenderHeight"
                  >
                    <view class="content" @click="goproduct(item.id)"
                          :data-col_index="colIndex"
                          :data-item_index="index">
                      <image
                          class="image"
                          mode="aspectFill"
                          :src="item.pic"
                          :style="{height:item.__waterfall_imageHeight}"
                      >
                        <!-- 必须给图片的高度设置为 __waterfall_imageHeight 属性的高 -->
                      </image>
                      <view class="title">{{ item.brandStr }} {{ item.gpsVinDetail.typename }}</view>
                      <view class="tag-box">
                        <!--                  <uni-tag :inverted="true" type="primary" :text="item2" v-for="(item2,index) in item.vehicleParams"-->
                        <!--                           size="mini" :key="index" v-if="item2" class="tag">-->
                        <!--                  </uni-tag>-->
                        <text v-for="(item2,index) in item.vehicleParams" class="tag" :key="index">{{ item2 }}</text>
                      </view>
                      <!--                      <view class="label ellipsis-1">{{item.label}}</view>-->
                      <view class="note">日租金
                        <text class="money">¥ {{ ' ' + item.money }}</text>
                        元
                      </view>
                      <!--                      <view class="shop ellipsis-1">{{ item.shopName }}</view>-->
                      <!-- 这个节点真实项目中可删除 -->
                      <!--                      <view-->
                      <!--                          v-if="(colIndex === 0 && index === 0) || (colIndex === 1 && index === 1)"-->
                      <!--                          style="margin-top: 8px;border: red solid 1px;padding: 8px;"-->
                      <!--                      >-->
                      <!--                        <view style="font-size: 12px;color: red;margin-bottom: 4px;">-->
                      <!--                          次节点为演示 update 函数动态更新数据的能力，-->
                      <!--                          真是项目删除即可-->
                      <!--                        </view>-->
                      <!--                        <view>-->
                      <!--                          <button-->
                      <!--                              size="mini"-->
                      <!--                              style="margin-right: 4px;"-->
                      <!--                              :type="item.star ? 'primary':'warn'"-->
                      <!--                              @tap.stop="handleStar({-->
                      <!--												colIndex,-->
                      <!--												itemIndex:index,-->
                      <!--												data:item-->
                      <!--											})"-->
                      <!--                          >{{item.star ? '已':''}}收藏</button>-->
                      <!--                        </view>-->
                      <!--                        <view>-->
                      <!--                          <view-->
                      <!--                              v-if="item.activeHeight"-->
                      <!--                              :style="{height:item.activeHeight+'px'}"-->
                      <!--                              style="background-color: rgba(255, 0, 0, 0.4);font-size: 12px;"-->
                      <!--                          >当前随机高度：{{ item.activeHeight }}</view>-->
                      <!--                          <button size="mini"-->
                      <!--                                  @tap.stop="handleActiveHeight({-->
                      <!--												colIndex,-->
                      <!--												itemIndex:index,-->
                      <!--												data:item-->
                      <!--											})"-->
                      <!--                          >随机高度</button>-->
                      <!--                        </view>-->
                      <!--                      </view>-->
                    </view>
                  </waterfall-item>
                </template>
              </waterfall-col>
            </template>
            <template #tips>
              <view class="load-txt">
                <view v-if="hideList">
                  <!--                  <template v-if="waterfall.status === 'fail'">-->
                  <!--                    &lt;!&ndash;                    <image src="@/uni_modules/helang-waterfall/static/waterfall/fail.png" mode="aspectFit"></image>&ndash;&gt;-->
                  <!--                    <view>数据异常</view>-->
                  <!--                  </template>-->
                  <kevy-empty type="data" :show="true"/>
                </view>
                <!--                <view v-else style="padding-top: 30rpx;">加载中</view>-->

              </view>
            </template>
          </waterfall>
        </block>

        <!--        <nomore text="没有更多车辆了" v-if="nomore"></nomore>-->
        <!--        <nodata text="没有查找到相关车辆" v-if="nodata"></nodata>-->
        <loading v-if="loading"></loading>
      </scroll-view>
    </view>

  </view>
</template>

<script>
import {getdictTypelist, getvehicle_grarbox_vehicle_structure} from '../../utils/new_file.js'

import {uploadIdCardSppSecret, uploadUrl, txAppId, uploadIdCardAppId} from '../../utils/config'

import homeskeleton from './homeskeleton/homeskeleton.vue'
import {selectCarsBySchedule} from "@/utils/api/stock";
import Waterfall from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue";
import WaterfallCol from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-col.vue";
import WaterfallItem from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue";

var util = require('@/components/WSCoordinate.js')

export default {
  components: {
    homeskeleton,
    "waterfall": Waterfall,
    "waterfall-col": WaterfallCol,
    "waterfall-item": WaterfallItem
  },
  computed: {
    // hideList() {
    //   return ['fail', 'empty'].includes(this.waterfall.status);
    // },
    imgurl() {
      return getApp().globalData.imgUrl
    },
  },
  onShareTimeline(res) {
    let name = getApp().globalData.name
    let share = {
      title: name,
      path: `/pages/home/home`,
    }
    let logo = getApp().globalData.logoUrl
    if (logo) {
      share.imageUrl = this.imgurl + logo
    }
    console.log('share', share.imageUrl)
    return share
  },
  onShareAppMessage(res) {
    let name = getApp().globalData.name
    let share = {
      title: name,
      path: `/pages/home/home`,
    }
    let logo = getApp().globalData.logoUrl

    if (logo) {
      share.imageUrl = this.imgurl + logo
    }
    console.log('share', share.imageUrl)
    return share
  },
  data() {
    return {
      hideList: false,
      ajax: {
        // 是否可以加载
        load: true,
        // 每页的请求条件
        rows: 10,
        // 页码
        page: 1,
        // 数据列表
        dataList: []
      },
      // 瀑布流组件相关
      waterfall: {
        // 组件状态
        status: '',
        // 是否渲染完成
        renderEnd: true
      },

      searchName: '',
      filterData: [
        {
          "name": '综合',
          "type": 'hierarchy-column',
          "value": "综合",
          "submenu": [
            {
              "name": "特价优先",
              "value": 0
            },
            {
              "name": "好评优先",
              "value": 1
            },
            {
              "name": "日租低价优先",
              "value": 2
            },
            {
              "name": "自租高价优先",
              "value": 3
            },
            {
              "name": "定金底价优先",
              "value": 4
            },
            {
              "name": "定金高价优先",
              "value": 5
            },
            {
              "name": "距离优先",
              "value": 6
            }
          ]
        },
        {
          "name": '距离',
          "type": 'hierarchy-column',
          "value": "距离",
          "submenu": [
            {

              "name": '500米内',
              "value": 500
            },
            {
              "name": '1公里内',
              "value": 1000
            },
            {
              "name": '2公里内',
              "value": 2000
            },
            {
              "name": '4公里内',
              "value": 4000
            },
            {
              "name": '8公里内',
              "value": 8000
            },
            {
              "name": '10公里内',
              "value": 10000
            }
          ]
        },
        {
          "name": '服务类型',
          "value": "服务类型",
          "type": 'hierarchy-column',
          "submenu": [
            {
              "name": '租车服务',
              "value": 0
            },
            {
              "name": '包车服务',
              "value": 1
            }]
        },
        {
          "name": '品牌',
          "value": "品牌",
          "type": 'hierarchy-column',
          "submenu": [{
            "name": "大众",
            "value": "0"
          }]
        },
        {
          "name": '筛选',
          "type": 'filter',
          "value": "筛选",
          "submenu": [
            {
              "name": '变速箱类型',
              "value": '变速箱类型',
              "submenu": [
                {
                  "name": '手动挡',
                  "value": "手动挡"
                },
                {
                  "name": '自动挡',
                  "value": "自动挡"
                }
              ]
            },
            {
              "name": '车身结构类型',
              "value": '车身结构类型',
              "submenu": [
                {
                  "name": '两厢',
                  "value": "两厢"
                },
                {
                  "name": '三厢',
                  "value": "三厢"
                }
              ]
            },
            {
              "name": '车辆类型',
              "value": "车辆类型",
              "submenu": [
                {
                  "name": '豪华五座',
                  "value": "豪华五座"
                },
                {
                  "name": '豪华七座',
                  "value": "豪华七座"
                },
                {
                  "name": '大巴车(9-51座)',
                  "value": "大巴车"
                }
              ]
            },
            {
              "name": '包车类型',
              "value": "包车类型",
              "submenu": [
                {
                  "name": '豪华五座',
                  "value": "豪华五座"
                },
                {
                  "name": '豪华七座',
                  "value": "豪华七座"
                },
                {
                  "name": '大巴车(9-51座)',
                  "value": "大巴车"
                }
              ]
            }, {
              "name": '动力类型',
              "value": "包车类型",
              "submenu": [
                {
                  "name": '汽油',
                  "value": "汽油"
                },
                {
                  "name": '油电混合',
                  "value": "豪华七座"
                },
                {
                  "name": '纯电动',
                  "value": "纯电动"
                }
              ]
            },
            {
              "name": '燃料型号',
              "value": "燃料型号",
              "submenu": [
                {
                  "name": '92号',
                  "value": "0"
                },
                {
                  "name": '95号',
                  "value": "1"
                },
                {
                  "name": '柴油',
                  "value": "2"
                }
              ]
            }
          ]
        }

      ],
      choseRadio: false,
      showTime: {
        daysDifference: '',
        startTime: '',
        startDay: '',
        endDay: '',
        endTime: ''
      },
      // catcheparams: {},
      serviceType: {
        current: 0,
        activeColor: '#007aff',
        type: [
          "租车服务",
          "包车服务"
        ],
        engageCarType: '',
      },
      minDate: '',
      datetimerange: [],
      menuindex: 0,
      datalist: [],
      nodata: false,
      initLoading: false,
      loading: false,
      nomore: false,
      choseItem: undefined,
      field: '',
      filter: {
        powerType: '',
        distanceOrderBy: '',
        orderBy: '',
        orderByAppointment: '',
        distance: '',
        brand: '',
        serviceType: '',
        serviceTypeOption: [],
        carType: [],
        structure: [],
        fueltype: [],
        fuelgrade: [],
        grarbox: []
      },
      myLocation: {
        userLng: '',
        userLat: '',
      },
      defaultChose: undefined,
      opt: {
        pageSize: 6,
        pageNum: 1,
        total: 0
      },

    }
  },

  onShow: function (e) {
    // setTimeout(() => {
    //   this.startStep()
    // }, 1000)
    // if (this.product.product_type == 1) {
    // 	uni.$emit('getglassrecord');
    // }

    const today = new Date();
    this.minDate = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate() + ' ' + today
        .getHours() + ':' + today.getMinutes();
    this.datetimerange = [new Date().Format("yyyy-MM-dd"), new Date(new Date().getTime() + 24 * 60 * 60 * 1000).Format("yyyy-MM-dd")]
    this.pickupChange(this.datetimerange)
  },
  onLoad() {
    // this.$nextTick(()=>{
    //   setTimeout(()=>{
    //     uni.navigateTo({
    //       url: '/pages/home/guide'
    //     })
    //   },1000)
    // })
  },
  mounted() {

    console.log('getExtConfigSync', uploadIdCardSppSecret, uploadUrl, txAppId, uploadIdCardAppId)
    // 设置默认值
    this.dictTypelistfun(() => {
      //this.pickupChange(this.datetimerange)
    })
    this.defaultChose = [[null], [null], [0], [null], [[], [], [], []]]
    this.filter.serviceType = 0
  },
  onPullDownRefresh() {
    this.opt.pageNum = 1
    this.opt.pageSize = 10
    this.opt.total = 0
    this.nomore = false
    this.datalist = []
    //this.Carmodelrecommendfun();
    this.filterCarList()
    this.dictTypelistfun(() => {
      uni.stopPullDownRefresh()
    })
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 2000)
  },
  onReachBottom() {
    console.log(this.opt.pageNum, this.opt.total);
    if (this.opt.pageNum >= this.opt.total / this.opt.pageSize) {
      this.nomore = true

      // this.waterfall.status = 'empty';
    } else {
      this.opt.pageNum++
      this.ajax.load = true;
      this.filterCarList()
    }
  },
  watch: {
    // datetimerange(a, b) {
    // 	console.log(a, b);

    // }
  },
  methods: {
    // 监听渲染高度，此事件为必用
    onRenderHeight(e) {
      console.log('onRenderHeight', e)
      const {colIndex, height, reportHeightTimeChange} = e;
      // 上报当前高度，上报后会自动触发下一项数据的渲染
      this.$refs.helangWaterfall.reportHeight({
        colIndex,
        height,
        reportHeightTimeChange
      });
    },

    // 导航状态切换演示监听
    onStatusChange() {
      const vlaues = ['', 'fail', 'empty'];
      const labels = ['正常展示', '加载异常', '无结果'];
      uni.showActionSheet({
        itemList: labels,
        success: (res) => {
          this.waterfall.status = vlaues[res.tapIndex];
        }
      });
    },
    // 瀑布流组件点击事件
    handleClick(e) {
      const {col_index, item_index} = e?.currentTarget?.dataset;
      // uni.showToast({
      //   title: `第${col_index + 1}栏的${item_index + 1}个被点击`,
      //   icon: 'none'
      // });
    },
    // 处理瀑布流渲染状态
    handleStatusChange(status) {
      if (status === 'RENDER_END') {
        this.waterfall.renderEnd = true;
      } else {
        this.waterfall.renderEnd = false;
      }
    },
    // 收藏
    handleStar(params) {
      const {colIndex, itemIndex, data} = params;
      // 切换收藏状态
      const star = !data?.star;
      this.$refs.helangWaterfall.update({
        colIndex,
        itemIndex,
        data: {
          ...data,
          star
          // 此处因为收藏操作不会改变渲染高度，所以不需要传递reportHeight参数
        }
      })
    },
    // 收藏
    handleActiveHeight(params) {
      const {colIndex, itemIndex, data} = params;
      const activeHeight = Math.floor(Math.random() * 100) + 50;
      this.$refs.helangWaterfall.update({
        colIndex,
        itemIndex,
        data: {
          ...data,
          activeHeight
        },
        // 因为改变高度后会于原来的高度产生差值，需要重新上报高度
        // update 方法的 reportHeight 参数设置为 true
        reportHeight: true
      });
    },

    choseRadioEvent(chose) {
      if (this.choseRadio) {
        this.initList()
      }
      this.choseRadio = !this.choseRadio
    },
    filterCarList() {
      this.loading = true
      let itemobj = {
        distanceLimit: this.filter.distance,
        structureStr: this.filter.structure.join(','),
        grarboxStr: this.filter.grarbox.join(','),
        engageCarTypeStr: this.filter.serviceTypeOption,
        cartypeStr: this.filter.carType.join(','),
        fueltypeStr: this.filter.fueltype.join(','),
        fuelgradeStr: this.filter.fuelgrade.join(','),
        brand: this.filter.brand != '' ? Number(this.filter.brand) : '',
        orderBy: this.filter.orderBy,
        distanceOrderBy: this.filter.distanceOrderBy,
        pageSize: this.opt.pageSize,
        name: this.searchName,// 通过名称搜索
        pageNum: this.opt.pageNum,
        status: 1,
        // userLng: 113.03976629695893,
        // userLat: 28.23049184180553,
        userLng: this.myLocation.userLng,
        userLat: this.myLocation.userLat,
        startTime: this.datetimerange[0],
        endTime: this.datetimerange[1],
        //serviceType: this.serviceType.current  //租车类型
      }
      if (this.filter.serviceType === 0) {
        itemobj.isRental = 1
      } else if (this.filter.serviceType === 1) {
        itemobj.isChartered = 1
      }

      selectCarsBySchedule(itemobj).then(data => {
        if (data.data.code == 200) {
          if (!this.ajax.load) {
            return;
          }
          this.opt.total = data.data.total
          this.loading = false
          this.ajax.load = true;

          // 获取到的数据，请注意数据结构

          // 第一页数据执行以下代码
          if (this.opt.pageNum == 1) {
            // 关闭下拉
            uni.stopPullDownRefresh();
          }

          // 数据无效时处理
          // if (data.data.rows <= 1) {
          //   // 设置提示内容
          //   this.waterfall.status = this.opt.pageNum === 1 ? 'fail' : 'empty';
          //   return;
          // }
          let list = []
          for (let i = 0; i < data.data.rows.length; i++) {
            let info = data.data.rows[i]
            info.pic = this.imgurl + data.data.rows[i].pic
            info.gpsVinDetail = JSON.parse(data.data.rows[i].gpsVinDetail)
            list.push(info)
          }

          // // 当前页面页面为1时，表示列表重绘，场景一般是 刷新/搜索 时
          const reset = this.opt.pageNum == 1 ? true : false;
          // 若是重绘列表的话，需要取消 `hideList`属性，隐藏状态下会引发列表尺寸获取错误的问题
          this.hideList = false
          console.log('reset', reset, data.data.rows)
          if (reset) {
            if (data.data.rows.length == 0) {
              this.hideList = true
              this.waterfall.status = 'empty';
            }
          }
          this.waterfall.status = '';
          // 调用 render 方法，使组件开始进入渲染阶段
          this.$refs.helangWaterfall.render(list, reset);
          this.ajax.load = true;
          // this.ajax.page++;


          // console.log(data.data.rows.length);
          // // this.datalist = data.data.rows
          // this.opt.total = data.data.total
          // this.datalist = [...this.datalist, ...data.data.rows]
          // if (this.datalist.length == 0) {
          //   this.nodata = true
          // } else {
          //   this.nodata = false
          // }
          // this.$nextTick(() => {
          //   this.loading = false
          //   this.initLoading = false
          // })
        } else {
          this.loading = false
          this.nodata = true
        }

      })
    },
    confirmFilter(e) {
      console.log(JSON.stringify(e.value))
      this.filter.orderBy = ''
      this.filter.distanceOrderBy = ''
      switch (e.value[0][0]) {
        case 0:
        case 1:
          uni.showToast({
            title: '暂未开放该功能',
            icon: 'none',
          })
          break
        case 2:
          this.$set(this.filter, 'orderBy', 'asc')
          break
        case 3:
          this.$set(this.filter, 'orderBy', 'desc')
          break
        case 4:
          this.$set(this.filter, 'orderByAppointment', 'asc')
          break
        case 5:
          this.$set(this.filter, 'orderByAppointment', 'desc')
          break
        case 6:
          this.$set(this.filter, 'distanceOrderBy', 'asc')
          console.log('distanceOrderBy', this.filter)
          break
      }
      this.filter.distance = e.value[1][0]
      // 服务类型
      this.filter.serviceType = e.value[2][0]
      // 品牌类型
      this.filter.brand = e.value[3][0]
      // 包车服务中的包车类型
      this.filter.serviceTypeOption = e.value[4][3]
      // 车辆类型
      this.filter.carType = e.value[4][2]
      // 车身结构
      this.filter.structure = e.value[4][1]
      // 车厢结构
      this.filter.grarbox = e.value[4][0]
      // 动力类型
      this.filter.fueltype = e.value[4][4]
      // 燃料型号
      this.filter.fuelgrade = e.value[4][5]
      this.waterfall.status = '';
      this.initList()
    },
    initList() {
      console.log('appId', uni.getAccountInfoSync().miniProgram.appId)
      this.datalist = []
      this.opt.pageNum = 1
      this.filterCarList()
    },
    pickupChange(time) {
      let startDate = new Date(time[0])
      let endDate = new Date(time[1])
      // 计算相差的毫秒数
      const difference = Math.abs(endDate - startDate);
      let start = this.pickupFormatTime(startDate)
      let end = this.pickupFormatTime(endDate)
      this.showTime.startTime = start.day
      this.showTime.startDay = start.weekDay
      this.showTime.endTime = end.day
      this.showTime.endDay = end.weekDay
      // 将毫秒数转换为天数
      this.showTime.daysDifference = Math.ceil(difference / (1000 * 60 * 60 * 24));
      this.initList()
    },
    pickupFormatTime(pickDate) {
      let localTime = new Date(pickDate)
      const monthDay = ("0" + (localTime.getMonth() + 1)).slice(-2) + "-" + ("0" + localTime
          .getDate()).slice(-2) + "日";

      // 获取并格式化星期
      const weekDays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      const weekDay = weekDays[localTime.getDay()];

      // 特定情况下将星期替换为"今天"
      const today = new Date();
      const isToday = localTime.getDate() === today.getDate() && localTime.getMonth() === today
          .getMonth() && localTime.getFullYear() === today.getFullYear();
      const dayLabel = isToday ? "今天" : weekDay;

      // 提取小时和分钟
      const hours = ("0" + localTime.getHours()).slice(-2);
      const minutes = ("0" + localTime.getMinutes()).slice(-2);

      // 组合时间部分
      const time = `${hours}:${minutes}`;

      // 组合最终的格式化字符串
      const formattedTime = `${monthDay} ${dayLabel}`;
      return {
        day: monthDay,
        weekDay: dayLabel,
        time: time
      }
      // console.log(pickDate)
    },
    dictTypelistfun(back) {
      this.loading = true
      this.getbranchlistfun(back)
      getvehicle_grarbox_vehicle_structure('vehicle_brand').then(data1 => {
        let array = [{
          name: '全部',
          value: ''
        }]
        for (let i = 0; i < data1.data.rows.length; i++) {
          array.push({
            name: data1.data.rows[i].dictLabel,
            value: data1.data.rows[i].dictValue
          })
        }
        // 筛选（下标为3）-》变速箱（下标为0）
        //this.filterData[3]['submenu'][0]['submenu']=array
        this.$set(this.filterData[3], 'submenu', array)
        console.log('brand', this.filterData)
      })
      getvehicle_grarbox_vehicle_structure('vehicle_grarbox').then(data1 => {
        let array = []
        for (let i = 0; i < data1.data.rows.length; i++) {
          array.push({
            name: data1.data.rows[i].dictLabel,
            value: data1.data.rows[i].dictValue
          })
        }
        // 筛选（下标为3）-》变速箱（下标为0）
        //this.filterData[3]['submenu'][0]['submenu']=array
        this.$set(this.filterData[4]['submenu'][0], 'submenu', array)
        //dictLabel
        //dictValue
      })
      getvehicle_grarbox_vehicle_structure('vehicle_structure').then(data2 => {
        let array = []
        for (let i = 0; i < data2.data.rows.length; i++) {
          array.push({
            name: data2.data.rows[i].dictLabel,
            value: data2.data.rows[i].dictValue
          })
        }
        // 筛选（下标为3）-》车身结构类型（下标为1）
        this.filterData[4]['submenu'][1]['submenu'] = array
      })
      getdictTypelist().then(data => {
        if (data.data.code == 200) {
          this.loading = false

          let array = []
          for (let i = 0; i < data.data.rows.length; i++) {
            array.push({
              name: data.data.rows[i].dictLabel,
              value: data.data.rows[i].dictValue
            })
          }
          // 设置包车服务包箱类型
          this.$set(this.filterData[4]['submenu'][2], 'submenu', array)
        }
      })
      // 查询服务类型
      getvehicle_grarbox_vehicle_structure('engage_cartype').then(data3 => {
        this.loading = false
        let array = []
        for (let i = 0; i < data3.data.rows.length; i++) {
          array.push({
            name: data3.data.rows[i].dictLabel,
            value: data3.data.rows[i].dictValue
          })
        }
        //
        this.$set(this.filterData[4]['submenu'][3], 'submenu', array)
      })

      getvehicle_grarbox_vehicle_structure('fuel_type').then(data3 => {
        this.loading = false
        let array = []
        for (let i = 0; i < data3.data.rows.length; i++) {
          array.push({
            name: data3.data.rows[i].dictLabel,
            value: data3.data.rows[i].dictValue
          })
        }
        //
        this.$set(this.filterData[4]['submenu'][4], 'submenu', array)
      })
      getvehicle_grarbox_vehicle_structure('fuel_grade').then(data3 => {
        this.loading = false
        let array = []
        for (let i = 0; i < data3.data.rows.length; i++) {
          array.push({
            name: data3.data.rows[i].dictLabel,
            value: data3.data.rows[i].dictValue
          })
        }
        //
        this.$set(this.filterData[4]['submenu'][5], 'submenu', array)
      })
    },

    async getbranchlistfun(back) {
      const _this = this
      uni.getLocation({
        type: 'gcj02',
        isHighAccuracy: true,
        success: res => {
          console.log(res, 'res');
          // 将GCJ-02(火星坐标)转为百度坐标
          var result2 = util.transformFromGCJToBaidu(res.latitude, res.longitude);
          console.log(result2, 'result2');

          this.myLocation.userLng = result2.longitude
          this.myLocation.userLat = result2.latitude
          if (typeof back == 'function') {
            back()
          }
        }, fail: err => {
          uni.authorize({
            scope: 'scope.userLocation',
            success() {
              // 用户同意授权，可以获取位置信息
              _this.getbranchlistfun(back)
              this.loading = false;
            },
            fail(err) {
              // 用户拒绝授权
              this.loading = false;
              // uni.navigateTo({
              //   url: '/pagesB/emptyPage/emptyPage?tips=无法定位门店,请打开手机定位功能'
              // })
            }
          });

        }
      })
    },
    goproduct(item) {
      // if (item.isRental == 1 && item.isChartered == 1) {
      //   this.choseItem = item
      //   this.$refs.alertDialog.open()
      // } else
      console.log('goproduct', item)
      if (this.filter.serviceType == 0) {
        uni.navigateTo({
          url: '/pagesA/product/product?id=' + item + '&datetimerange=' + JSON.stringify(this
              .datetimerange)
        })
      } else if (this.filter.serviceType == 1) {
        uni.navigateTo({
          url: '/pagesA/product/allInclusiveProduct?id=' + item + '&datetimerange=' + JSON.stringify(this
              .datetimerange)
        })
      }
    },
    // 过滤向上取整
    getRoundedNumber(value) {
      // 确保值为数字
      value = parseFloat(value);

      // 将值转换为以km为单位的字符串，并保留一位小数
      return (value / 1000).toFixed(1) + ' km';
    },
    // dianziqian(){

    // 	  uni.navigateToMiniProgram({
    // 	    appId: 'wxa023b292fd19d41d', // 电子签appId
    // 	    path: 'pages/guide/index?path=/pages/contracts/contract-detail&login=1&verify=1&id=${id}&organizationId=${organizationId}&orgName=${orgName}&channel=${channel}', // 跳转的页面路径，可选，默认跳转到目标小程序首页; 签署时，需使用后台API返回的完整链接（类似pages/guide?id=xxx&foo=bar）
    // 	    extraData: { // 需要传递给目标小程序的数据，可选；签署时，腾讯电子签小程序未使用到该参数
    // 	      foo: 'bar'
    // 	    },
    // 	    envVersion: 'release', // 目标小程序版本号，可选，默认跳转到正式版
    // 	    success(res) {
    // 	      // 成功跳转到目标小程序后的回调函数
    // 	    },
    // 	    fail(res) {
    // 	      // 跳转失败的回调函数
    // 	    }
    // 	  })

    // }
  }
}
</script>

<style lang="scss">
page {
  background: #f6f7fb;
}

.search-container {
  position: fixed;
  padding: 30rpx;
  width: 100%;
  background: #F8F8F8;
  z-index: 99;
  top: 0;
  //top: var(--window-top);

  .example-body {
    font-size: 28rpx;
    position: relative;
    border-radius: 10px;

    .line {
      right: 0;
      width: 100%;
      top: 22px;
      position: absolute;
      border-bottom: 1px solid #bfbfbf;
      height: 1px;
      margin: 10rpx;
      animation: loadingLine 250ms linear;
    }

    .date-line {
      right: 0;
      width: 0;
      top: 22px;
      position: absolute;
      border-bottom: 1px solid #bfbfbf;
      height: 1px;
      margin: 10rpx;
      transition: 250ms linear;
    }
  }


  .height-line {
    font-size: 32rpx;
    font-weight: bold;
  }
}


.search-input {
  width: 100%;
  //animation: loading 250ms linear;
  float: left;
}

@keyframes hideLoading {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}

@keyframes loadingLine {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.topsearch {
  width: 100%;
  padding: 16rpx 20rpx;
}

.topsearch .f1 {
  height: 60rpx;
  border-radius: 30rpx;
  border: 0;
  background-color: #f7f7f7;
  flex: 1
}

.topsearch .f1 .img {
  width: 24rpx;
  height: 24rpx;
  margin-left: 10px
}

.topsearch .f1 input {
  height: 100%;
  flex: 1;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.topsearch .search-btn {
  display: flex;
  align-items: center;
  color: #5a5a5a;
  font-size: 30rpx;
  width: 60rpx;
  text-align: center;
  margin-left: 20rpx
}

.search-navbar {
  //display: flex; text-align: center; align-items: center; padding: 5rpx 0
}

.search-nav {
  display: flex;
  text-align: center;
  align-items: center;
  padding: 5upx 0
}

.search-navbar-item {
  flex: 1;
  height: 70rpx;
  line-height: 70rpx;
  position: relative;
  font-size: 28rpx;
  font-weight: bold;
  color: #323232
}

.search-navbar-item .iconshangla {
  position: absolute;
  top: -4rpx;
  padding: 0 6rpx;
  font-size: 20rpx;
  color: #7D7D7D
}

.search-navbar-item .icondaoxu {
  position: absolute;
  top: 8rpx;
  padding: 0 6rpx;
  font-size: 20rpx;
  color: #7D7D7D
}

.search-navbar-item .iconshaixuan {
  margin-left: 10rpx;
  font-size: 22rpx;
  color: #7d7d7d
}

.search-history {
  padding: 24rpx 34rpx;
}

.search-history .search-history-title {
  color: #666;
}

.search-history .delete-search-history {
  float: right;
  padding: 15rpx 20rpx;
  margin-top: -15rpx;
}

.search-history-list {
  padding: 24rpx 0 0 0;
}

.search-history-list .search-history-item {
  display: inline-block;
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 20rpx;
  margin: 0 10rpx 10rpx 0;
  background: #ddd;
  border-radius: 10rpx;
  font-size: 26rpx;
}

.filter-page {
  height: 100%;
}

.filter-cut {
  width: 100%;
  height: 200rpx;
}

.search-filter {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 100%;
  flex-wrap: wrap;
  padding: 0;
}

.filter-content-title {
  color: #000;
  font-weight: 700;
  font-size: 28rpx;
  height: 30rpx;
  line-height: 30rpx;
  padding: 0 30rpx;
  margin-top: 30rpx;
  margin-bottom: 10rpx
}

.filter-title {
  color: #BBBBBB;
  font-size: 32rpx;
  background: #F8F8F8;
  padding: 60rpx 0 30rpx 20rpx;
}

.search-filter-content {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx 20rpx;
}

.search-filter-content .filter-item {
  background: #F4F4F4;
  border-radius: 28rpx;
  color: #2B2B2B;
  font-weight: bold;
  margin: 10rpx 10rpx;
  min-width: 140rpx;
  height: 56rpx;
  line-height: 56rpx;
  text-align: center;
  font-size: 24rpx;
  padding: 0 30rpx
}

.search-filter-content .filter-item-active {
  color: #3388ff;
  background: rgba(51, 136, 255, 0.1);
}

.search-filter-content .close {
  text-align: right;
  font-size: 24rpx;
  color: #ff4544;
  width: 100%;
  padding-right: 20rpx
}

.search-filter button .icon {
  margin-top: 6rpx;
  height: 54rpx;
}

.search-filter-btn {
  display: flex;
  padding: 30rpx 30rpx;
  justify-content: space-between
}

.search-filter-btn .btn {
  width: 250rpx;
  height: 75rpx;
  line-height: 75rpx;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 33rpx;
  color: #2B2B2B;
  font-weight: bold;
  font-size: 24rpx;
  text-align: center
}

.search-filter-btn .btn2 {
  width: 250rpx;
  height: 75rpx;
  line-height: 75rpx;
  border-radius: 33rpx;
  color: #fff;
  font-weight: bold;
  font-size: 24rpx;
  text-align: center
}

.product-container {
  width: 100%;
  /* margin-top: 190rpx; */
  /* background-color: #eee; */
  font-size: 26rpx;
  //padding: 0 14rpx;
  padding-right: 0;
}
</style>

<style>
.content-container {
  flex: 1;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.nav_left {
  width: 25%;
  height: 100%;
  background: #ffffff;
  overflow-y: scroll;
}

.nav_left .desc {
  color: #888;
  font-size: 25upx;
}

.nav_left .nav_left_items {
  line-height: 50rpx;
  color: #333;
  /* font-weight: bold; */
  border-bottom: 0px solid #E6E6E6;
  font-size: 26rpx;
  position: relative;
  border-right: 0 solid #E6E6E6;
  padding: 25rpx 30rpx;
}

.nav_left .nav_left_items.active {
  color: rgb(51, 136, 255);
  background: rgba(51, 136, 255, 0.1);
  color: #3388ff;;
  font-size: 26rpx;
  font-weight: bold
}

.nav_left .nav_left_items .before {
  position: absolute;
  top: 50%;
  margin-top: -12rpx;
  left: 10rpx;
  height: 24rpx;
  border-radius: 4rpx;
  width: 8rpx
}

.nav_left .nav_left_items.active .before {
  display: block
}

.nav_right {
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f6f6f6;
  box-sizing: border-box;
  padding: 20rpx 20rpx 0 20rpx
}

.nav_right-content {
  background: #ffffff;
  padding: 0 20rpx;
  height: 100%
}

.nav-pai {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-paili {
  flex: 1;
  text-align: center;
  color: #323232;
  font-size: 28rpx;
  font-weight: bold;
  position: relative;
  height: 80rpx;
  line-height: 80rpx;
}

.nav-paili .iconshangla {
  position: absolute;
  top: -4rpx;
  padding: 0 6rpx;
  font-size: 20rpx;
  color: #7D7D7D
}

.nav-paili .icondaoxu {
  position: absolute;
  top: 8rpx;
  padding: 0 6rpx;
  font-size: 20rpx;
  color: #7D7D7D
}
</style>
<style lang="less">
.mendian-top {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20upx;

  .left {
    .title {
      font-size: 30upx;
    }

    .text {
      margin-left: 10upx;
      font-size: 20upx;
      color: #888;
    }
  }
}

.uni-datetime-picker-text {
  font-size: 20upx;
}

.mendian-content {
  padding: 10upx 20upx;

  .wodeaddres {
    margin-bottom: 15upx;
  }

  .item-nav-active {
    border: 1upx solid #3388ff !important;
  }

  .item-nav {
    padding: 25upx;
    position: relative;
    border-radius: 10upx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    color: #888;
    font-size: 26upx;
    overflow: hidden;
    margin-bottom: 26upx;
    border: 1upx solid #fff;

    .flex {
      position: absolute;
      right: 0;
      top: 0;
      background-color: #3388ff;
      color: #fff;
      font-size: 24upx;
      padding: 3upx 10upx;
      border-bottom-left-radius: 15upx;
    }

    .left {

      .top {
        display: flex;
        align-items: center;

        image {
          width: 40upx;
          height: 40upx;
        }

        .name {
          color: #000;
          font-size: 30upx;
        }
      }

      .text {
        margin-top: 20upx;
      }
    }

    .right {
      padding-top: 15upx;

      .text {
        margin-top: 20upx;
      }
    }
  }
}

.segmented-control {
  height: 72rpx !important;
}

.segmented-control__text {
  font-size: 33rpx !important;
}

.segmented-control__item--button {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}

.segmented-control__item--button--first {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.segmented-control__item--button--last {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.uni-date-x {
  height: 80rpx;
}


.content {
  padding-bottom: 5rpx;
  //background-color: white;
  background: linear-gradient(to bottom, rgb(246, 247, 251) 0%, rgba(255, 255, 255, 1) 100%);
  border-radius: 8px;
  line-height: 1.3;
  border: 1px solid #fff;
  overflow: hidden;

  .image {
    display: block;
    width: 100%;
    height: auto;
  }


  .ellipsis-1 {
    white-space: nowrap; // 强制一行显示
    overflow: hidden; // 超出隐藏
    text-overflow: ellipsis; // 省略号
  }

  .tag-box {
    margin: 0 5rpx;
  }

  .title {
    font-size: 30rpx;
    color: #000;
    font-weight: bold;
    margin: 20rpx 5rpx;
  }

  .shop {
    font-size: 24rpx;
    color: #666;
    margin-top: 20rpx;
  }

  .label {
    padding: 10rpx 20rpx;
    border-radius: 100px;
    background-color: #F00;
    color: white;
    font-size: 24rpx;
    display: inline-block;
    line-height: 1;
  }

  .note {
    font-size: 30rpx;
    margin: 20rpx 5rpx 0;
    text-align: right;
  }

  .money {
    padding-left: 5rpx;
    font-size: 36rpx;
    color: #fd6336;
    margin-top: 20rpx;
    font-weight: bold;
    text-align: right;
  }
}

.load-txt {
  margin-top: 20rpx;
  padding: 0;
  text-align: center;
  color: #999;
  font-size: 24rpx;
}

.load-icon {
  width: 300rpx;
  height: 300rpx;
  margin: 0 auto 20rpx auto;
  display: block;
}

.status-change {
  position: fixed;
  left: 10rpx;
  top: 60%;
  width: 80rpx;
  height: 80rpx;
  z-index: 100;
  font-size: 24rpx;
  border-radius: 50%;
  background-color: #f00;
  color: #fff;
  line-height: 1;
  opacity: .7;
  box-shadow: 0 0 10px black;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.tag {
  font-size: 25rpx;

}

.tag:not(:last-child):after {
  margin: auto 2px;
  content: '/';
  color: #d3d3d3;
}

.guide {
  background: #007aff;
  height: 60px;
  border-radius: 10px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  flex-direction: column;
  gap: 5px;

  &-title {
    font-size: 15px;

  }

  &-text {
    font-size: 11px;
  }
}
</style>